<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" >
    <div style="padding-bottom: 20px;">
        <el-input
                v-model="searchInfo.username"
                size="medium"
                placeholder="请输入姓名"
                suffix-icon=""
                style="display:inline-block;width: 200px;">
        </el-input>
        <el-input
                v-model="searchInfo.operateType"
                size="medium"
                placeholder="请输入操作类型"
                suffix-icon=""
                style="display:inline-block;width: 200px;">
        </el-input>
        <el-input
                v-model="searchInfo.operateDept"
                size="medium"
                placeholder="请输入所属部门"
                suffix-icon=""
                style="display:inline-block;width: 200px;">
        </el-input>
        <el-button type="primary" @click="searchLogInfo()">查询</el-button>
        <el-button type="success" @click="exportLog()">下载</el-button>
    </div>
    <el-table
            border
            :data="queryLogs">
        <el-table-column
                prop="username"
                label="用户名" >
        </el-table-column>
        <el-table-column
                prop="aphone"
                label="用户手机号" >
        </el-table-column>
        <el-table-column
                prop="operateDate"
                label="操作日期">
        </el-table-column>
        <el-table-column
                prop="operateIP"
                label="IP地址">
        </el-table-column>
        <el-table-column
                prop="operateType"
                label="操作类型" >
        </el-table-column>
        <el-table-column
                prop="operateDept"
                label="操作部门">
        </el-table-column>
        <el-table-column
                prop="operateState"
                label="操作状态">
        </el-table-column>
        <el-table-column
                prop=""
                label="操作详情">
            <template slot-scope="scope">
                <el-button type="success" @click="getLogInfo(scope.row.id)" plain > 查看详情 </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="操作简介" :visible.sync="dialogFormVisible">
        <el-descriptions direction="vertical" :column="2" border>
            <el-descriptions-item>
                <template slot="label">
                    用户名
                </template>
                {{getLog.username}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                   手机号
                </template>
                {{getLog.aphone}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    操作时间
                </template>
                {{getLog.operateDate}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    操作IP
                </template>
                {{getLog.operateIP}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    操作类型
                </template>
                {{getLog.operateType}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    操作部门
                </template>
                {{getLog.operateDept}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    操作状态
                </template>
                {{haha.isOk}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    操作详情
                </template>
                {{getLog.operateDetails}}
            </el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">关 闭</el-button>
        </div>
    </el-dialog>
    <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="totalCount"
            :page-size="pagesize">
    </el-pagination>
</div>
<script>
    var haha = new Vue({
        el: "#app",
        data: {
            searchInfo:{
                username:"",
                operateType:"",
                operateDept:"",
                operateDate:"",
                operateIP:"",
                aphone:"",
                operateDetails:"",
                isOk:""
            },
            totalCount:0,
            pagesize:7,
            isOk:"",
            getLog:{},
            queryLogs:[],
            dialogFormVisible:false
        },
        methods: {
            downloadAdminDemo(){
                window.location.href = "/demo/admin/操作日志.xlsx";
            },
            exportLog(){
                window.location.href =  "/demo/logsource/download?" +
                    "username="+haha.searchInfo.username+
                    "&aphone="+haha.searchInfo.aphone+
                    "&operateDate="+haha.searchInfo.operateDate+
                    "&operateIP="+haha.searchInfo.operateIP+
                    "&operateType="+haha.searchInfo.operateType+
                    "&operateDept="+haha.searchInfo.operateDept+
                    "&isOk="+haha.searchInfo.isOk+
                    "&operateDetails="+haha.searchInfo.operateDetails+
                    "&pageNO=1&pageCount=5000";
            },
            searchLogInfo(){
                getData(1,7);
            },
            handleCurrentChange( val ){
                getData(val,7)
            },
            getLogInfo(id){
                $.get("/demo/operate/getLog/"+id,function (backData) {
                    haha.getLog = backData.data;
                    if (backData.data.operateState == 1){
                        haha.isOk = "操作成功";
                    } else{
                        haha.isOk = "操作失败";
                    }
                });
                haha.dialogFormVisible=true;
            }
        }
    });
    function getData( a , b ) {
        haha.searchInfo.pageNO = a;
        haha.searchInfo.pageCount = b;
        $.post("/demo/operate/queryLog",haha.searchInfo,function (backData) {
            haha.queryLogs = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
        });
    }
    getData(1,7);
</script>
</body>
</html>